<!--
 * @Date: 2023-03-12 14:22:26
 * @LastEditors: Zireael 1193875164@qq.com
 * @LastEditTime: 2023-04-10 15:35:58
 * @FilePath: \A19\frontend\src\components\RunCode\JudgeExp.vue
-->
<template>
    <div class="list-container">
        <div class="head">
            批阅实验
        </div>
        <div style="height: calc(100% - 60px);">
            <el-table :data="filterTableData" style="width: 100%;height: calc(100% - 60px);">
                <el-table-column type="index" width="50" />
                <el-table-column prop="name" label="姓名" sortable >
                    <template #default="scope">
                        {{ scope.row.student.name }}
                    </template>
                </el-table-column>
                <el-table-column prop="name" label="学号" sortable >
                    <template #default="scope">
                        {{scope.row.student.number  }}
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="分数" sortable >
                    <template #default="scope">
                        {{ paperFinded(scope.row.student)?.score || 0 }}
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="状态" sortable >
                    
                    <template #default="scope">
                        <span :style="{color:paperFinded(scope.row.student)?'#67C23A':'#F56C6C'}">{{ paperFinded(scope.row.student)?'已提交':'未提交' }}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="操作">
                    <template #header>
                        <el-input v-model="search" size="small" placeholder="姓名、学号" />
                    </template>
                    <template #default="scope">
                        <ElButton :disabled="!Boolean(paperFinded(scope.row.student))" @click="judgeExpPaper(scope.row.student as users)"  link type="primary" size="small">批阅</ElButton>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { storeToRefs } from 'pinia';
import { useClientStore } from '../../pinia/stores/client';
import { codeAnswer, userExperiments } from '../../shared/types/userExperiments';
import { users } from '../../shared/types/user';

const route = useRoute()
const router = useRouter()
const expId = route.params.expId as string
const { client,currentCourseId } = storeToRefs(useClientStore())

const students = reactive(new Array<{
    _id:string,
    student:users,
    course:string
}>())

const commitedUserExps = reactive(new Array<{
    _id: string;
    student: users[];
    experiment: string;
    submitTime: Date;
    score: number;
    answers: codeAnswer[];
}>())
const search = ref('')
const filterTableData = computed(() =>
    students.filter((data) =>{
        return !search.value || data.student.name.toLowerCase().includes(search.value.toLowerCase()) || data.student.number.toLowerCase().includes(search.value.toLowerCase())
    })
)
const paperFinded = (stu:users) => {
    // return tests.find((t:any) => t.test === testId)
    // console.log(stu);
    // console.log(papers);
    return commitedUserExps.find(p => p.student[0]._id === stu._id)
}

const judgeExpPaper = (stu:users) =>{
    router.push({
        name:'judgeExpPaper',
        params:{
            expId
        },
        query:{
            id:stu._id
        }
    })
}

let loadingInstance:any
onMounted(async () =>{
    loadingInstance = ElLoading.service({
        target:'#app'
    })
    if(!expId){
        ElMessage.error('不存在')
        loadingInstance.close()
        router.back()
        return
    }
    
    const ret = await client.value.callApi('Experiment/GetUserExps',{
      experiment:expId
    })
    if(ret.isSucc){
      if(ret.res.commitedUserExps){
        commitedUserExps.push(...ret.res.commitedUserExps)
      }
    }

    const ret2 = await client.value.callApi('Experiment/CourseFromExp',{
        experiment:expId
    })
    if(ret2.isSucc){
        currentCourseId.value = ret2.res.expInfo.course
    }

    const ret3 = await client.value.callApi('Get/GetCourseStus',{
        course:currentCourseId.value
    })
    if(ret3.isSucc){
        students.push(...ret3.res.stus.map(s => {
            return {
                ...s,
                student:s.student[0]
            }
        }))
    }
    loadingInstance.close()
})
</script>

<style lang="less" scoped>

</style>